<div class="d-flex justify-content-between">
  <h3 class="primary-text m-0">{{ 'menu.restart.title' | translate }}</h3>
</div>

<div class="my-4 align-items-center" style="max-width: 1000px; margin: auto">
  <div class="w-100 text-center primary-text mb-5">
    <i class="fas fa-power-off" style="font-size: 75px"></i>
  </div>
  <div class="text-center">
    <h4 class="primary-text mb-4">{{ 'restart.title_restart' | translate }}</h4>
    @if (error) {
    <div class="alert alert-error my-4">{{ error }}</div>
    } @else {
    <p class="grey-text">{{ 'restart.please_wait_while_server_restarts' | translate }}</p>
    <div class="justify-content-center my-4">
      <div class="restart-progress-box primary-text">
        <span>
          <i
            [ngClass]="{
              'fas fa-spinner fa-spin': !uiOnline,
              'far fa-check-circle': uiOnline
            }"
          ></i>
          {{ 'restart.ui_online' | translate }}
        </span>
      </div>
      <div class="restart-progress-box primary-text">
        <span [ngClass]="{ 'grey-text': !uiOnline }">
          <i
            [ngClass]="{
              'far fa-circle': !uiOnline,
              'fas fa-spinner fa-spin': uiOnline
            }"
          ></i>
          {{ 'restart.service_ready' | translate }}
        </span>
      </div>
    </div>
    } @if (timeout) {
    <div class="alert alert-warning my-4">
      <p>{{ 'restart.server_is_taking_long_time_to_restart' | translate }}</p>
      <p class="grey-text mb-0">
        {{ 'restart.label_restart_command_executed' | translate }}:
        <span class="font-monospace">{{ resp.command || "End Process" }}</span>
      </p>
      @if (uiOnline) {
      <p class="mt-2 mb-0">
        <button class="btn btn-primary mb-0" (click)="viewLogs()">{{ 'menu.tooltip_view_logs' | translate }}</button>
      </p>
      }
    </div>
    }
  </div>
</div>
